<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Amaze UI Admin index Examples</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <header th:replace="header::html"></header>


</head>

<body data-type="widgets">
<header th:replace="header::html"></header>
<div class="am-g tpl-g">
    <!-- 头部 -->
    <div th:insert="public.html :: head"></div>
    <!-- 风格切换 -->
    <div th:insert="public.html :: tpl-skiner"></div>
    <!-- 侧边导航栏 -->
    <div th:insert="public.html :: left"></div>


    <!-- 内容区域 -->
    <div class="tpl-content-wrapper">
        <div class="row-content am-cf">
            <div class="row">
                <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                    <div class="widget am-cf">
                        <div class="widget-head am-cf">
                            <div class="widget-title  am-cf">用户管理</div>

                        </div>
                        <div class="widget-body  am-fr">
                            <div class="am-u-sm-12 am-u-md-6 am-u-lg-6">
                                <div class="am-form-group">
                                    <div class="am-btn-toolbar">
                                        <div class="am-btn-group am-btn-group-xs">
                                            <a lay-event="add" id="add" type="button" class="am-btn am-btn-default am-btn-success" ><span
                                                    class="am-icon-plus"></span> 新增
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
                                <div class="am-input-group am-input-group-sm tpl-form-border-form cl-p">
                                    <input type="text" class="am-form-field ">
                                    <span class="am-input-group-btn">
            <button class="am-btn  am-btn-default am-btn-success tpl-table-list-field am-icon-search"
                    type="button"></button>
          </span>
                                </div>
                            </div>
                            <div class="am-u-sm-12">
                                <table id="demo" lay-filter="test" class="layui-hide"></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<header th:replace="header::html"></header>
<script th:src="@{/assets/js/app.js}"></script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="isAll">删除所选</button>
    </div>
</script>

<script th:inline="none">
    layui.use('table', function () {
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#demo'
            , height: 400
            , url: '/role/rolelist' //数据接口
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板

            , response: {
                dataName: 'datas'   //规定数据列表的字段名称，默认data
            }
            , defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , page: false //开启分页
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                , {field: 'roleid', width: 300, title: 'roleid', sort: true}
                , {field: 'name', title: '姓名', sort: true}
            ]]
        });

        //监听行工具事件
        /*table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    $.ajax({
                        url: '/user/delete'  //数据接口
                        , type: 'post'
                        , data: {'userid': data.userid}
                        , success: function (res) {
                            if (res.code == 200 || res.code == 0) {
                                obj.del();//仅删除应行（tr）的Dom结构，并更行缓存
                                layui.table.reload('demo');
                                layer.close(index);
                                console.log(index);
                                layer.msg("删除成功", {icon: 1});
                            } else {
                                layer.msg("删除失败", {icon: 5});
                            }
                        }
                    })
                });
            } else if (obj.event === 'edit') {
                layer.open({
                    title:"修改",
                    type:2,  //(iframe层) 类型是打开html页面
                    area:['45%','70%'],      //弹出层宽高
                    content:'/updateuser',
                    success: function (layero, index) {      //layero 当前层    index 索引层
                        //获取当前打开的子页面id
                        var id = $(layero).find("iframe").contents().find("#updateuserid");
                        //把当前页id值传给子页面
                        id.val(data.userid);
                    }
                });
            }
        });
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });*/
    });

    /*$("#add").on("click",function () {
        var index = layer.open({
            title:"新增用户",
            type:2,  //(iframe层) 类型是打开html页面
            area:['45%','60%'],      //弹出层宽高
            content:'/adduser'
        })

    })*/
</script>

</body>

</html>